<template>
  <div>
    <!-- 头部搜索模块 -->
    <!-- <headerSearch :selectObj="selectObject" :isShowAdd="menuFlag" :goSearchFc="searchClickHmcargo" :addFun="leixingAddModel"/> -->
    <div class="search_form">
			<div>
				<el-select
					size="mini"
					clearable
					placeholder="货物类型"
					v-model="paramform.cargoclasscode"
					class="others"
					popper-class="selectClass"
				>
					<el-option v-for="(item, index) in cargoClass" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
				</el-select>
        <el-input size="mini" v-model="paramform.cargoname" placeholder="货物名称" class="others"></el-input>

				<el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="searchClickHmcargo">查询</el-button>
			</div>
      <div>
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="leixingAddModel" v-hasPermi="['metaDataManagement:Cargo:cargoinfoInsert']">新建</el-button>
      </div>
    </div>
    <!-- 中间表格模块 -->
    <!-- 货物列表 -->
    <BaseTable
      :data="cargotableData"
      :columns="cargotableDataColumns"
      :tableHeight="tableHeight"
      :pagination="false"
      :loading="loading"
    >
      <el-table-column
          fixed="right"
          align="center"
          label="操作"
          slot="operationColumn"
          width="220px">
        <template slot-scope="scope">
          <el-button
              size="mini"
              title="编辑"
              v-hasPermi="['metaDataManagement:Cargo:cargoinfoUpdate']"
              @click.stop="handleEdit(scope.$index, scope.row)"><span style="color:#0B6CD6"><i class='iconfont icon-1-07'></i>编辑</span></el-button>
          
          <el-button
              size="mini"
              title="列表"
              v-hasPermi="['metaDataManagement:Cargo:cargoinfoList']"
              @click.stop="excelFun(scope.$index,scope.row)"><span style="color:#9420A8"><i class='iconfont icon-1-09'></i>列表</span></el-button>
          
            <el-button
              size="mini"
              title="删除"
              v-hasPermi="['metaDataManagement:Cargo:cargoinfoDelete']"
              @click.stop="handleDelete('huowu',scope.row.id)"><span style="color:#F75E5E"><i class='iconfont icon-1-08'></i>删除</span></el-button>
        </template>
      </el-table-column>
    </BaseTable>

    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="startpage"
        :page-sizes="[10,15, 20, 25, 30]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      ></el-pagination>
    </div>

    <!-- 新增货物列表 -->
    <el-drawer
      :before-close="handleClose"
      :title="cargotitle"
      :visible.sync="addleixingMod"
      direction="rtl"
    >
      <el-form
        ref="addRef"
        :rules="addrule"
        status-icon
        size="small"
        :model="form"
        style="padding:10px 20px"
      >
        <el-form-item prop="cargoName" label="货种名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.cargoName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="cargoclassCode" label="货物类型" :label-width="formLabelWidth">
          <el-select
            filterable
            v-model="form.cargoclassCode"
            @change="selectCargo"
            placeholder
            clearable
            style="width:100%"
          >
            <el-option
              v-for="item in cargoClass"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="updatePoint" label="场存节点" :label-width="formLabelWidth">
          <el-select
            filterable
            v-model="form.updatePoint"
            placeholder
            clearable
            style="width:100%"
          >
            <el-option
              v-for="item in updatePointList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="sortNum" label="排序" :label-width="formLabelWidth">
          <el-input
            @input="form.sortNum = verifyfilter('number', form.sortNum)"
            type
            v-model="form.sortNum"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <!-- <el-button size="small" type="primary" @click="addList()">保 存</el-button> -->
        <el-button size="small" type="primary" @click="postList" :loading="cargoLoading">{{ cargoLoading ? '提交中 ...' : '保 存' }}</el-button>
      </div>
    </el-drawer>
    <!-- 新增货名配置 -->
    <el-drawer :before-close="handleClose" title="新增货名" :visible.sync="addzidian" direction="rtl">
      <el-form
        ref="addming"
        status-icon
        size="small"
        :model="formList"
        style="padding:10px 20px"
        :rules="addrule"
      >
        <el-form-item prop="cargoName" label="货名名称" :label-width="formLabelWidth">
          <el-input
            v-model="formList.cargoName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="shorthandCode" label="速记码" :label-width="formLabelWidth">
          <el-input
            v-model="formList.shorthandCode"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="workType" label="作业模式" :label-width="formLabelWidth">
          <el-select v-model="formList.workType" class="selectclass">
            <el-option
              v-for="item in workTypeList"
              :key="item.value"
              :value="item.value"
              :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="件货理货方式" :label-width="formLabelWidth">
          <el-select v-model="formList.tally" class="selectclass">
            <el-option
              v-for="item in tallyList"
              :key="item.value"
              :value="item.value"
              :label="item.label"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          prop="sortNum"
          :rules="[{ required: true, message: '排序不能为空' }]"
          label="排序"
          :label-width="formLabelWidth"
        >
          <el-input
            @input="
                  formList.sortNum = verifyfilter('number', formList.sortNum)
                "
            type
            v-model="formList.sortNum"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="cargoColor" label="货名颜色" :label-width="formLabelWidth">
          <el-color-picker :active-change="changeColor" v-model="formList.cargoColor"></el-color-picker>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="addZidian()" :loading="nameLoading">{{ nameLoading ? '提交中 ...' : '保 存' }}</el-button>
      </div>
    </el-drawer>

    <!-- 修改货名 -->
    <el-drawer :before-close="handleClose" title="编辑货名" :visible.sync="editzidian" :rules="addrule">
      <el-form ref="editming" status-icon size="small" :model="nowData" style="padding:10px 20px">
        <el-form-item
          prop="cargoName"
          :rules="[{ required: true, message: '货名名称不能为空' }]"
          label="货名名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="nowData.cargoName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="shorthandCode"
          :rules="[{ required: true, message: '速记码不能为空' }]"
          label="速记码"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="nowData.shorthandCode"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="workType"
         label="作业模式"
         :rules="[{ required: true, message: '作业模式不能为空' }]"
         :label-width="formLabelWidth">
          <el-select v-model="nowData.workType">
            <el-option
              v-for="item in workTypeList"
              :key="item.value"
              :value="item.value"
              :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="tally"
         label="件杂货理货方式"
         :label-width="formLabelWidth">
          <el-select v-model="nowData.tally">
            <el-option
              v-for="item in tallyList"
              :key="item.value"
              :value="item.value"
              :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="sortNum"
          :rules="[{ required: true, message: '排序不能为空' }]"
          label="排序"
          :label-width="formLabelWidth"
        >
          <el-input
            @input="nowData.sortNum = verifyfilter('number', nowData.sortNum)"
            v-model="nowData.sortNum"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="cargoColor" :rules="[{ required: true, message: '货物颜色不能为空' }]" label="货名颜色" :label-width="formLabelWidth">
          <el-color-picker :active-change="changeColor" v-model="nowData.cargoColor"></el-color-picker>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="zeditTypeList()" :loading="nameLoading">{{ nameLoading ? '提交中 ...' : '保 存' }}</el-button>
      </div>
    </el-drawer>
    <!-- 货名列表 -->
    <el-drawer
      :before-close="handleClose1"
      title="货名列表"
      :visible.sync="exlc"
      direction="rtl"
      size="50%"
    >
      <el-form ref="addming" size="mini" :model="ParamformList" inline style="padding:10px 20px">
        <el-form-item label>
          <el-input placeholder="货名名称" v-model="ParamformList.cargoName" style="width:150px" @keyup.enter.native="searchClickHm"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClickHm()" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item style="float:right;">
          <div>
            <el-button icon="el-icon-plus" @click="zidianAddModel" size="mini"></el-button>
          </div>
        </el-form-item>
      </el-form>
      <BaseTable
      :data="cargotableDataList"
      :columns="cargotableDataListColumns"
      :tableHeight="tableHeight+50"
      :pagination="false"
      :loading="loading"
    ></BaseTable>

      <!-- <el-table
        highlight-current-row
        stripe
        :height="this.cuHeight - 150"
        :data="cargotableDataList"
        style="width: 100%;border:1px solid gainsboro"
      >
        <el-table-column align="center" type="index" width="55"></el-table-column>
        <el-table-column prop="cargoinfoName" label="货名名称"  show-overflow-tooltip width></el-table-column>
        <el-table-column prop="shortCode" label="速记码"  show-overflow-tooltip width></el-table-column>
        <el-table-column prop="cargoinfoColor"  show-overflow-tooltip label="货名颜色">
          <template slot-scope="scope">
            <span class="isomcolor" :style="{ background: scope.row.cargoinfoColor }"></span>
          </template>
        </el-table-column>
        <el-table-column prop="sortNum" type="number" show-overflow-tooltip :min="0" label="排序"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scoper">
            <el-button size="mini" @click="zEdit(scoper.$index, scoper.row)">
               <span style='color:#0B6CD6'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>
            </el-button>
          </template>
        </el-table-column>
      </el-table> -->
      <div class="page">
        <el-pagination
          background
          @size-change="handleSizeCha"
          @current-change="handleCurrentCha"
          :current-page="startpage1"
          :page-sizes="[10, 15, 20, 25, 30]"
          :page-size="pagesize1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum1"
        ></el-pagination>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import CheckTable from '@/components/BaseTable/baseTablecheck'
import BaseTable from '@/components/BaseTable'
import verify from '@/plugins/verify.js'
import { isObjectValueEqual } from '@/libs/date'
import headerSearch from './component/headerSearch'
import publicapi from '@/api/public/index'
import api from '@/api/Basic/goods/index'
export default {
  name: 'metadataGoods',
  components: {
    CheckTable,
    BaseTable,
    headerSearch
  },
  data() {
    return {
      nameLoading: false,
      cargoLoading: false,
      // 作业类型
      workTypeList: [
        {
          value: '1',
          label: '件杂'
        }, {
          value: '2',
          label: '散杂'
        }, {
          value: '3',
          label: '木材'
        }
      ],
      // 件杂货理货方式
      tallyList: [
        {
          value: '1',
          label: '件号'
        }, {
          value: '2',
          label: '件数'
        }
      ],
      // 搜索框显示对象
      selectObject: [
        {
          name: '货物类型',
          type: 'select',
          modelName: 'cargoclasscode',
          selectData: this.cargoClass
        },
        {
          name: '货名名称',
          type: 'input',
          modelName: 'cargoname'
        }
      ],
      paramform: {
        cargoclasscode: '',
        cargoname: ''
      },
      cargotitle: '新增货物',
      // 表格列表
      cargotableDataColumns: [
        {
          prop: 'cargoTypeName',
          label: '货类名称'
        },
        {
          prop: 'cargoCategoryName',
          label: '货种名称'
        },
        {
          prop: 'updatePointName',
          label: '场存节点'
        },
        {
          prop: 'sortNum',
          label: '排序',
          sortable: true
        }
        // {
        //   label: '操作',
        //   align: 'center',
        //   width: '220',
        //   render: (h, params) => {
        //     return h(
        //       'div',
        //       {
        //         class: 'btnClass'
        //       },
        //       [
        //         h('el-button', {
        //           props: {
        //             size: 'mini',
        //           },
        //           style: {
        //             marginRight: '10px'
        //           },
        //           domProps: {
        //             // 添加标签,使用自己引入的iconfont图标
        //             innerHTML:`<span style='color:#0B6CD6;'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`,
        //           },
        //           on: {
        //             click: () => {
        //               click: this.handleEdit(params.$index, params.row)
        //             }
        //           }
        //         }),
        //         h('el-button', {
        //           props: {
        //             size: 'mini'
        //           },
        //           style: {
        //             marginRight: '10px'
        //           },
        //           domProps: {
        //             // 添加标签,使用自己引入的iconfont图标
        //             innerHTML:
        //               `<span style='color:#9420A8;'><i class='iconfont icon-1-09'></i><span  style='padding-left:5px;'>列表</span></span>`

        //           },
        //           on: {
        //             click: () => {
        //               click: this.excelFun(params.$index, params.row)
        //             }
        //           }
        //         }),
        //         h('el-button', {
        //         	props: {
        //         		size: 'mini',
        //         	},
        //         	domProps: { // 添加标签,使用自己引入的iconfont图标
        //         		innerHTML: "<span style='color:#DA2821;'><i class='iconfont icon-1-08'></i>删除</span>"
        //         	},
        //         	on: {
        //         		click: () => {
        //         			click: this.handleDelete('huowu', params.row.id)
        //         		}
        //         	}
        //         }),
        //       ]
        //     )
        //   }
        // }
      ],
      menuArr: [],
      cargotableDataListColumns: [
        {
          prop: 'cargoName',
          label: '货名名称'
        },
        {
          prop: 'shorthandCode',
          label: '速记码'
        },
        {
          prop: 'workType',
          label: '作业模式',
          render: (h, params) => {
            return h('div', {
              domProps: {
                innerHTML: params.row.workType == '1' ? '件杂' : params.row.workType == '2' ? '散杂' : '木材'
              }
            })
          }
        },
        {
          prop: 'tally',
          label: '理货方式',
          render: (h, params) => {
            return h('div', {
              domProps: {
                innerHTML: params.row.tally == '1' ? '件号' : params.row.tally == '2' ? '件数' : ''
              }
            })
          }
        },
        {
          prop: 'sortNum',
          label: '排序',
          sortable: true
        },

        {
          label: '货名颜色',
          align: 'center',
          render: (h, params) => {
            return h('div', {
              domProps: {
                // 添加标签,使用自己引入的iconfont图标
                innerHTML: `<span style='border-radius:3px;border-left:8px solid ${params.row.cargoColor};border-right:8px solid ${params.row.cargoColor}'></span>`
              }
            })
          }
        },
        {
          label: '操作',
          align: 'center',
          width: 220,
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: "<span style='color:#0B6CD6'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>"
                  },
                  on: {
                    click: () => {
                      this.zEdit(params.$index, params.row)
                    }
                  }
                }),
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: "<span style='color:#f75e5e'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>"
                  },
                  on: {
                    click: () => {
                      this.handleDelete('huoming', params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      addrule: {
        sortNum: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ],
        updatePoint: [
          {
            required: true,
            message: '请选择更新节点',
            trigger: 'blur'
          }
        ],
        shorthandCode: [
          {
            required: true,
            message: '请输入速记码',
            trigger: 'blur'
          }
        ],
        cargoclassCode: [
          {
            required: true,
            message: '货物类型不能为空',
            trigger: 'change'
          }
        ],
        shortCode: [
          {
            required: true,
            message: '速记码不能为空',
            trigger: 'change'
          }
        ],
        cargoName: [
          {
            required: true,
            message: '货物名称不能为空',
            trigger: 'change'
          }
        ],
        workType: [
          {
            required: true,
            message: '作业类型不能为空',
            trigger: 'change'
          }
        ],
        tally: [
          {
            required: true,
            message: '件杂货理货方式不能为空',
            trigger: 'change'
          }
        ],
        cargoColor: [
          {
            required: true,
            message: '货物颜色不能为空',
            trigger: 'change'
          }
        ]
      },
      prorelation: false, // 关联项目组
      companyName: '',
      procheckedComp: [],
      procomp: [],
      relarelation: false, // 关联作业公司
      relacompanyName: '',
      relacheckedComp: [],
      relacomp: [],
      cargoClass: [],
      paramform: {
        cargoclasscode: '',
        cargoclasstype: '',
        cargo: '',
        remark: '',
        delFlag: '',
        cargoname: ''
      }, // 查询类型
      cargeCode: '', // 货物code
      ParamformList: {
        dictLabel: '',
        dictValue: '',

        sortNum: '',
        cargo: '',
        remark: '',
        delFlag: '0',
        cargoName: ''
      }, // 查询货物
      loading: false,
      form: {
        cargoName: '',
        cargoCode: '',
        sortNum: '',
        updatePoint: '',
        cargoclassCode: '',
        cargoclasstype: ''
      }, // 货物列表form
      formList: {
        cargoName: '',
        cargoinfoEngName: '', // 货名英文名称
        dictLabel: '',
        dictValue: '',
        sortNum: '',
        cargo: '',
        remark: '',
        delFlag: '0',
        shortCode: '',
        color: '#409EFF',
        workType: '',
        tally: '',
        shorthandCode: ''
      }, // 货名列表form
      startpage1: 1,
      startpage: 1,
      pagesize: 15,
      pagesize1: 15,
      formLabelWidth: '100px', // form的item宽度
      editleixMod: false, // 修改弹出货物标签框
      addleixingMod: false, // 新增货物标签框
      exlc: false, // 列表货物框
      addzidian: false, // 新增货物框
      editzidian: false, // 修改货物框
      cargotableData: [], // 货物列表配置
      cargotableDataList: [], // 货物配置
      nowData: {
        cargoCode: '',
        cargoName: '',
        cargoclassCode: '',
        cargoclassName: '',
        cargoclasstype: '',
        createBy: '',
        createName: '',
        createTime: '',
        id: '',
        mainCargo: '',
        shortCode: '',
        sortNum: '',
        updateBy: '',
        updateName: '',
        updateTime: '',
        tally: '',
        workType: '',
        cargoCategoryCode: ''
      }, // 临时存放操作数据
      // 分页
      currentPage: 1,
      totalNum1: 1,
      totalNum: 1,
      cargoclassId: '',
      ref: '',
      // 批量删除
      ids: [],
      selectId: [],
      arr: [],
      flagHint: false,
      menuFlag: false,
      updatePointList: [
        {
          value: '1',
          label: '理货'
        },
        {
          value: '2',
          label: '签票'
        }
      ]
    }
  },
  watch: {
    form: {
      handler(newVal, oldVal) {
        this.flagHint = isObjectValueEqual(newVal, oldVal)
      },
      deep: true
    },
    nowData: {
      handler(newVal, oldVal) {
        this.flagHint = isObjectValueEqual(newVal, oldVal)
      },
      deep: true
    },
    formList: {
      handler(newVal, oldVal) {
        this.flagHint = isObjectValueEqual(newVal, oldVal)
      },
      deep: true
    }
  },
  async activated() {
    var menuArr = []
    var menuId = ''
    if (localStorage.getItem('menuArr')) {
      menuArr = JSON.parse(localStorage.getItem('menuArr'))
    }
    menuArr.map(item => {
      item.children.map(v => {
        if (window.location.href.includes(v.url)) {
          menuId = v.id
        }
      })
    })

    if (menuId) {
      this.menuArr = []
      await publicapi.getPermissionsBtn(menuId)
        .then(res => {
          res.data.data.map(item => {
            this.menuArr.push(item.RESOURCENAME)
          })
        }).catch((error) => {})
    }
    if (this.$store.state.app.searchResouce == 'menu') {
      this.paramform = {
        cargoclasscode: '',
        cargoclasstype: '',
        cargo: '',
        remark: '',
        delFlag: '',
        cargoname: ''
      }
    }
    this.getParas()
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight
    }
  },
  methods: {
    // 选择货物种类名称
    selectcargoName(value) {
      this.form.cargoclasstype = this.cargoClass.filter(v => v.dictValue == value)[0].dictLabel
    },
    postList() {
      if (this.index == 2) {
        this.addList()
      } else {
        this.editTypeList()
      }
    },
    // 绑定项目组
    async getbindData() {
      const that = this
      let trueId = new Set()

      trueId = that.arr.filter(n => n.bind).map(n => n.getDeptCode)

      that.selectId = trueId

      const data = {
        cargoId: that.nowData.id,
        groupCode: that.selectId
      }
      await that.$http.post(
        '/wfpms-master-service/api/external/mtcargo/addprojectrelation',
        data
      ).then(res => {
        if (res.data.success) {
          if (that.prorelation) {
            that.prorelation = false
          }
          that.$message.success(res.data.msg)
          that.getData()
        } else {
          that.$message.warning(res.data.msg)
        }
      }).catch(error => {})
    },
    newArr(arr) {
      return Array.from(new Set(arr))
    },

    change(z) {
      this.$forceUpdate()
      if (z === 'code') {
        this.form.cargoclassCode = this.verifyfilter(
          'latin',
          this.form.cargoclassCode
        )
      }
    },
    handleClose(done) {
      if (this.flagHint) {
        this.$confirm('您已修改了数据，确定是否关闭？')
          .then(_ => {
            done()
            const ref = this.ref
            this.$nextTick(() => {
              if (ref === 'addRef') {
                if (this.$refs['addRef'] !== undefined) {
                  this.$refs['addRef'].resetFields()
                }
              }
              if (ref === 'addming') {
                if (this.$refs['addming'] !== undefined) {
                  this.$refs['addming'].resetFields()
                }
              }
              if (ref === 'typeRef') {
                if (this.$refs['typeRef'] !== undefined) {
                  this.$refs['typeRef'].resetFields()
                }
              }
              if (ref === 'editming') {
                if (this.$refs['editming'] !== undefined) {
                  this.$refs['editming'].resetFields()
                }
              }
            })
          })
          .catch(_ => {})
      } else {
        done()
      }
    },
    handleClose1(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      done()
      this.ParamformList.cargoName = ''
      // })
      // .catch(_ => {})
    },
    // api/wfpms-master-service/api/external/public/listdict?dicttype=cargoclass
    async getParas() {
      await this.$http.get(
        `/wfpms-master-service/api/external/publics/listalldict?dicttype=CARGOCLASS`
      ).then(res => {
        if (res.status == 200) {
          if (res.data.success) {
            this.cargoClass = res.data.data.CARGOCLASS;
          } else {
            return this.$message.warning(res.data.msg)
          }
        } else {
          this.$message.error('获取数据失败！')
        }
      }).catch(error => {})
    },
    // 修改颜色选择器
    changeColor() {
      // console.log(this.formList.color);
      // console.log(this.nowData.color);
    },
    // 选择
    handleSelectionChange(val) {
      this.ids = []
      var that = this
      val.map(n => {
        that.ids.push(n.id)
      })
      this.ids = this.uniq(that.ids)
    },
    uniq(array) {
      var temp = [] // 一个新的临时数组
      for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
          temp.push(array[i])
        }
      }
      return temp
    },
    // 修改货物列表弹出
    async handleEdit(index, row) {
      this.index = 1
      this.cargoLoading = false
      this.cargotitle = '修改货物'
      if (!this.addleixingMod) {
        this.addleixingMod = true
      }
      if (this.$refs.addRef) { this.$refs.addRef.resetFields() }
      // this.ref = 'addRef'
      const res = await this.$http.get(
        `/wfpms-master-service/api/external/mtcargo/querycargobyid?id=${row.id}`
      )
      if (res.data.success) {
        const form = res.data.data
        this.form.id = form.id
        this.form.cargoName = form.cargoCategoryName
        this.form.cargoCode = form.cargoCategoryCode
        this.form.cargoclassCode = form.cargoTypeCode
        this.form.cargoclasstype = form.cargoTypeName
        this.form.sortNum = form.sortNum
        this.form.updatePoint = form.updatePoint ? form.updatePoint + '' : ''
      }
    },
    // 修改货物列表PUT
    async editTypeList() {
      const data = {
        id: this.form.id,
        cargoCategoryName: this.form.cargoName,
        cargoTypeCode: this.form.cargoclassCode,
        cargoTypeName: this.form.cargoclasstype,
        shortCode: this.form.shortCode,
        mainCargo: this.form.mainCargo,
        sortNum: this.form.sortNum,
        updatePoint: this.form.updatePoint
      }
      this.$refs['addRef'].validate(async valid => {
        if (valid) {
          this.cargoLoading = true
          await api.updatedata(data).then(res => {
            this.cargoLoading = false
            if (res.status == 200) {
              if (res.data.success) {
                if (this.addleixingMod) {
                  this.addleixingMod = false
                }
                this.$message.success(res.data.msg)
                this.getData()
              } else {
                return this.$message.warning(res.data.msg)
              }
            } else {
              this.$message.error('获取数据失败！')
            }
          }).catch(error => { this.cargoLoading = false })
        } else {
          return
        }
      })
    },
    // 修改货名弹出
    async zEdit(index, row) {
      this.ref = 'editming'
      const res = await api.updatagoods(row.id)
      if (res.data.success) {
        this.nowData = res.data.data
        if (this.nowData.tally == '0') {
          this.nowData.tally = ''
        }
      } else {
        return false
      }
      if (!this.editzidian) {
        this.editzidian = true
      }
    },
    // 修改货名PUT /api//wfpms-master-service/api/external/mtcargo/cargo/updatecargoinfo
    async zeditTypeList() {
      const data = {
        cargoCode: this.nowData.cargoCode,
        cargoColor: this.nowData.cargoColor,
        cargoName: this.nowData.cargoName,
        cargoCategoryCode: this.nowData.cargoCategoryCode,
        workType: this.nowData.workType,
        tally: this.nowData.tally,
        sortNum: this.nowData.sortNum,
        shorthandCode: this.nowData.shorthandCode,
        id: this.nowData.id,
        delFlag: this.nowData.delFlag
      }
      if (this.nowData.workType != '1') {
        data.tally = '0'
      }

      // editming
      this.$refs['editming'].validate(async valid => {
        if (valid) {
          this.nameLoading = true
          await this.$http.put(
            `/wfpms-master-service/api/external/mtcargo/updatecargoinfo`,
            data
          ).then(res => {
            this.nameLoading = false
            if (res.status == 200) {
              if (res.data.success) {
                if (this.editzidian) {
                  this.editzidian = false
                }
                this.$message.success(res.data.msg)
                this.getListData()
              } else {
                return this.$message.warning(res.data.msg)
              }
            } else {
              this.$message.error('获取数据失败！')
            }
          }).catch(error => { this.nameLoading = false })
        } else {
          return
        }
      })
    },
    // 货名列表弹出
    excelFun(index, row) {
      if (!this.exlc) {
        this.exlc = true
      }
      this.startpage1 = 1
      // this.nowData = row
      this.cargoCode = row.cargoCategoryCode
      // this.cargoclassId = row.id
      this.getListData()
    },
    // 货名新增弹出框
    zidianAddModel() {
      this.addzidian = true
      this.nameLoading = false
      // console.log(1111111)
      // this.ref = 'addming'
      this.formList = {
        dictLabel: '',
        dictValue: '',
        sortNum: '',
        shortCode: '',
        cargo: '',
        remark: '',
        delFlag: '0',
        color: '#409EFF'
      }
      // this.$nextTick(() => {
      //   this.$refs.addming.resetFields()
      // })

      this.formList.cargoCode = this.cargeCode
    },
    // 货物列表新增弹出框
    leixingAddModel() {
      this.index = 2

      this.addleixingMod = true
      // this.ref = 'addRef'
      this.cargotitle = '新增货物'
      this.form = {
        cargoName: '',
        shortCode: '',
        cargoCode: '',
        sortNum: '',
        cargoclassCode: '',
        updatePoint: ''
      }
      this.cargoLoading = false
      this.$nextTick(() => {
        this.$refs.addRef.resetFields()
      })
    },
    // 新增货物列表
    async addList() {
      const data = {
        cargoCategoryName: this.form.cargoName,
        cargoTypeCode: this.form.cargoclassCode,
        cargoTypeName: this.form.cargoclasstype,
        shortcode: this.form.shortCode,
        sortnum: this.form.sortNum,
        updatePoint: this.form.updatePoint
      }
      if (!this.form.cargoclassCode) {
        this.$message.warning('请选择货物类型')
      } else {
        this.$refs['addRef'].validate(async valid => {
          if (valid) {
            this.cargoLoading = true
            await api.addcargo(
              data
            ).then(res => {
              this.cargoLoading = false
              if (res.status == 200) {
                if (res.data.success) {
                  this.getData()
                  this.$nextTick(() => {
                    this.$refs['addRef'].resetFields() // 等弹窗里的form表单的dom渲染完在执行去除验证
                  })
                  this.$message.success(res.data.msg)
                  this.addleixingMod = false
                } else {
                  return this.$message.warning(res.data.msg)
                }
              } else {
                this.$message.error('新增失败！')
              }
            }).catch(error => { this.cargoLoading = false })
          } else {
            return
          }
        })
      }
    },
    async autoCargoRefer(obj, key) {
      // external/mtc_company/checkcustomerbyname
      const that = this
      const name = this[obj][key]
      const refer = await this.$http.get(
        // `/wfpms-master-service/api/external/mtcargo/autorefer?name=${name}`
        `/wfpms-master-service/api/external/public/autorefer?name=${name}`
      )
      if (refer.status == 200) {
        if (refer.data.success) {
          this[obj]['shortCode'] = refer.data.data
        }
      }
    },
    // 删除货物列表 /wfpms-master-service/api/external/mtcargo/deletecargo
    async subDelete(id) {
    	if (id) {
    		const res = await this.$http.delete(
    			`/wfpms-master-service/api/external/mtcargo/deletecargo?id=${id}`
    		)
    		if (res.status == 200) {
    			if (res.data.success) {
    				this.$message.success(res.data.msg)
    				this.startpage = 1
    				this.getData()
    			} else {
    				return this.$message.warning(res.data.msg)
    			}
    		} else {
    			this.$message.error('删除失败！')
    		}
    	} else {
    		this.$message.warning('请先选择删除数据')
    	}
    },
    // 删除货名列表
    async deleteZidian(id) {
    	if (id) {
    		const param = {
    			id: id
    		}
    		const res = await api.deletegoods(id)
    		if (res.status == 200) {
    			if (res.data.success) {
    				this.startpage1 = 1
    				this.$message.success(res.data.msg)
    				this.getListData()
    			} else {
    				return this.$message.warning(res.data.msg)
    			}
    		} else {
    			this.$message.error('删除失败！')
    		}
    	} else {
    		this.$message.error('请先选择删除数据')
    	}
    },
    // 新增货名数据
    async addZidian() {
      // addming
      this.$refs['addming'].validate(async valid => {
        if (valid) {
          this.nameLoading = true
          const data = {
            cargoColor: this.formList.cargoColor,
            cargoName: this.formList.cargoName,
            sortNum: this.formList.sortNum,
            workType: this.formList.workType,
            tally: this.formList.tally,
            shorthandCode: this.formList.shorthandCode,
            delFlag: '0',
            cargoCategoryCode: this.cargoCode
          }
          if (this.formList.workType != '1') {
            data.tally = '0'
          }
          const res = await api.addgoods(data).then(res => {
            this.nameLoading = false
            if (res.status == 200) {
              if (res.data.success) {
                this.$message.success(res.data.msg)
                this.getListData()
                this.$nextTick(() => {
                  this.$refs['addming'].resetFields()
                })
                this.addzidian = false
              } else {
                return this.$message.warning(res.data.msg)
              }
            } else {
              this.$message.error('新增失败')
            }
          }).catch(error => { this.nameLoading = false })
        } else {
          return false
        }
      })
    },
    // 选择货类
    selectCargo(val) {
      this.form.cargoclasstype = this.cargoClass.filter(v => v.dictValue == val)[0].dictLabel
    },
    // 查询数据货物列表 table
    async getData() {
      this.loading = true
      const that = this
      if (this.pagesize === 0) {
        that.startpage = 1
      }
      const params = {
        startpage: that.startpage,
        pagesize: that.pagesize,
        cargoclasscode: that.paramform.cargoclasscode,
        cargoname: this.paramform.cargoname
      }
      const res = await api.gettabledata(params).then(res => {
        if (res.status == 200) {
          if (res.data.success) {
            that.cargotableData = res.data.data.pages
            // 分页
            this.startpage = res.data.data.pageNum
            this.totalNum = parseInt(res.data.data.totalNum)
            this.pagesize = res.data.data.pageSize
            this.loading = false
          }
        } else {
          this.loading = false
          return this.$message.error('获取数据失败！')
        }
      }).catch(error => { this.loading = false })
    },
    searchClickHmcargo(searchData) {
      this.startpage = 1
      this.paramform = Object.assign(this.paramform, searchData);
      this.getData()
    },
    // 搜索货名
    searchClickHm() {
      this.startpage1 = 1
      this.getListData()
    },
    // 货名列表
    async getListData() {
      const that = this
      if (this.cargoCode === undefined) {
        this.cargoCode = this.nowData.cargoCode
      }
      if (this.pagesize1 === 0) {
        this.startpage1 = 1
      }

      await this.$http.get(
        `/wfpms-master-service/api/external/mtcargo/getcargoinfolistbycargoid?startpage=${this.startpage1}&pagesize=${this.pagesize1}&cargocode=${this.cargoCode}&cargoinfoName=${this.ParamformList.cargoName}`
      ).then(res => {
        if (res.status == 200) {
          if (res.data.data) {
            this.cargotableDataList = res.data.data.pages
            // 分页
            this.startpage1 = res.data.data.pageNum
            this.totalNum1 = parseInt(res.data.data.totalNum)
            this.pagesize1 = res.data.data.pageSize
          }
        }
      }).catch(error => {});
    },
    quxiaoliebiao() {
      if (this.exlc) {
        this.exlc = false
      }
    },
    // 取消
    cancel() {
      if (this.editleixMod) {
        this.editleixMod = false
      }
      if (this.addleixingMod) {
        this.addleixingMod = false
      }

      if (this.addzidian) {
        this.addzidian = false
      }
      if (this.editzidian) {
        this.editzidian = false
      }
      this.$message('已取消！')
    },
    // 每页显示的条数
    handleSizeCha(val) {
      this.pagesize1 = val
      this.getListData()
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.pagesize = val
      this.getData()
    },
    // 当前页
    handleCurrentCha(val) {
      this.startpage1 = val
      this.getListData()
    },
    // 当前页
    handleCurrentChange(val) {
      this.startpage = val
      this.getData()
    },
    // 绑定作业公司
    async getbindrelaData() {
      const that = this
      let trueId = new Set()
      // if (that.relacheckedComp.length !== 0) {
      trueId = that.arr.filter(n => n.bind).map(n => n.companyCode)
      that.selectId = trueId
      const data = {
        cargoinfoId: that.nowData.id,
        workcompanyCode: that.selectId
      }
      await that.$http.post(
        '/wfpms-master-service/api/external/mtcargo/addworkcomprelation',
        data
      ).then(res => {
        if (res.data.success) {
          if (that.relarelation) {
            that.relarelation = false
          }
          that.$message.success(res.data.msg)
          that.getListData()
        }
      }).catch(error => {})
    },
    newArr(arr) {
      return Array.from(new Set(arr))
    },
    async isCompany(info) {
      if (!this.relarelation) {
        this.relarelation = true
      }
      this.nowData = info
      const that = this
      const data = []
      const ids = new Array()
      await this.$http.get(
        `/wfpms-master-service/api/external/mtcargo/listcargoinfobind?id=${info.id}`
      ).then(res => {
        if (res.data.success) {
          this.relacomp = res.data.data.bindList
          this.relacompanyName = res.data.data.companyName
          // if (that.realacomp.length !== 0) {
          for (const n of this.relacomp) {
            // 如果绑定
            if (n.bind) {
              data.push(n.companyName)
              ids.push(n.companyCode)
            }
          }
          this.relacheckedComp = this.newArr(data)
          this.selectId = this.newArr(ids)
        }
      }).catch(error => {})
    },

    // 关联项目组改变
    relacompChange(v) {
      if (v) {
        this.relacheckedComp = v
        this.arr = this.relacomp.filter(n =>
          this.relacheckedComp.includes(n.companyName)
        )
        this.arr.forEach(i => {
          i.bind = true
        })
      }
    },
    // 根据选择框整体删除
    async handleDelete(flag, id) {
    	const confirmRes = await this.$confirm(
    		'此操作将永久删除该数据, 是否继续?',
    		'提示', {
    			confirmButtonText: '确定',
    			cancelButtonText: '取消',
    			type: 'warning'
    		}
    	).catch(err => {})
    	if (confirmRes !== 'confirm') {
    		return this.$message.info('已经取消删除')
    	}
    	if (flag == 'huowu') {
    		this.subDelete(id)
    	}
    	if (flag == 'huoming') {
    		this.deleteZidian(id)
    	}
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/searchfrom.less";
.isomcolor {
  width: 1rem;
  height: 1rem;
  position: absolute;
  border-radius: 3px;
  left: 37%;
  top: 0.7rem;
}

/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}

.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  padding: 0 1rem;
}

.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}

.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;

  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}

/deep/ .el-table .cell {
  white-space: nowrap;
}

/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}

/deep/ .el-pagination {
  text-align: right;
  padding: 10px 5px;
}

/deep/ .el-table th > .cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}

/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
  background-color: #fff;
  border: 1px solid #e1e4eb;
}

/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}

/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}

/deep/ .el-table th:nth-child(1) {
  border-left: none;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}

.btn /deep/ .el-button--mini,
.el-button--mini.is-round {
  padding: 7px 6px;
}

.selectBox {
  justify-content: space-between;
  display: flex;
  flex-direction: row-reverse;
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-bottom: 0;
  border-left: none;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 14px;
  padding-right: 20px;
}

// .excelBox /deep/ .el-drawer__open .el-drawer.rtl {
//   width: 50% !important;
// }

/deep/ .el-drawer__header {
  margin-bottom: 0px;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}

/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
}

/deep/ .el-button + .el-button {
  margin-left: 3px;
}

.el-select .el-select--small {
    width: 100% !important;
}
.selectclass {
    width: 100% !important;
}
</style>
